<!-- TransformerMonitor.vue -->
<template>
  <div class="container">
    <div :key="containerKey" class="border-box-wrapper">
      <dv-border-box-9 style="width: 100%; height: 100%">
        <div class="content-wrapper">
          <div class="monitor-header">
            <div class="header-title">
              <img
                src="@/assets/svg/light.svg"
                class="fas fa-bolt animated-icon"
              />
              <span>试验变压器状态监控</span>
            </div>
            <div class="header-actions">
              <button class="refresh-btn" @click="refreshView">
                <img src="@/assets/svg/refresh.svg" class="fas fa-sync-alt" />
              </button>
            </div>
          </div>

          <!-- 变压器状态概览 -->
          <div class="transformer-overview">
            <div class="transformer-image">
              <div class="pulse-ring"></div>
              <img
                src="@/assets/svg/bianyaqi.svg"
                class="transformer-svg-icon"
                alt="变压器图标"
              />
            </div>
            <div class="transformer-status">
              <div
                class="status-indicator"
                :class="{ running: isRunning, stopped: !isRunning }"
              >
                <span class="status-text">{{
                  isRunning ? "运行中" : "停止"
                }}</span>
              </div>
              <div class="status-details">
                <div class="detail-item">
                  <span class="label">电压</span>
                  <span class="value">{{ plcStore.voltage }} kV </span>
                </div>
                <div class="detail-item">
                  <span class="label">局放值</span>
                  <span class="value">{{ plcStore.partialDischarge }} pc </span>
                </div>
              </div>
            </div>
          </div>

          <!-- 开关状态监控 -->
          <div class="section">
            <div class="section-header">
              <img src="@/assets/svg/switch.svg" style="width: 20px" />
              <h3>开关状态监控</h3>
            </div>
            <div class="switch-status-grid">
              <div
                class="switch-item"
                v-for="(switchItem, index) in switches"
                :key="index"
                :class="switchItem.type"
              >
                <div
                  class="switch-icon"
                  :class="{ on: switchItem.status }"
                ></div>
                <div class="switch-info">
                  <span class="switch-name">{{ switchItem.name }}</span>
                  <span
                    class="switch-status"
                    :class="{
                      'status-on': switchItem.status,
                      'status-off': !switchItem.status,
                    }"
                  >
                    {{ switchItem.status ? "开启" : "关闭" }}
                  </span>
                </div>
                <div
                  class="switch-indicator"
                  :class="{ 'indicator-on': switchItem.status }"
                ></div>
              </div>
            </div>
          </div>
          <!-- 试验变状态监控 -->
          <div class="section">
            <div class="section-header">
              <img src="@/assets/svg/product.svg" style="width: 20px" />
              <h3>试验变状态监控</h3>
            </div>
            <div class="device-status-grid">
              <div
                class="device-item"
                v-for="(device, index) in devices"
                :key="index"
              >
                <div class="device-header">
                  <span class="device-name">{{ device.name }}</span>
                  <div
                    class="device-status-indicator"
                    :class="{
                      normal: device.status === '正常',
                      warning: device.status === '警告',
                      error: device.status === '异常',
                    }"
                  ></div>
                </div>
                <div class="device-value">
                  {{ device.value }} {{ device.unit }}
                </div>
                <div class="progress-bar">
                  <div
                    class="progress-fill"
                    :class="device.status.toLowerCase()"
                    :style="{ width: device.progress + '%' }"
                  ></div>
                </div>
              </div>
            </div>
          </div>
          <div class="section">
            <div class="section-header">
              <img src="@/assets/svg/product.svg" style="width: 20px" />
              <h3>实验产品状态</h3>
            </div>
            <div class="product-info">
              <div class="product-detail-card">
                <div class="product-icon">
                  <i class="fas fa-microchip"></i>
                </div>
                <div class="product-details">
                  <div class="detail-row">
                    <span class="detail-label">产品名称</span>
                    <span class="detail-value">{{ productInfo.name }}</span>
                  </div>
                  <div class="detail-row">
                    <span class="detail-label">产品型号</span>
                    <span class="detail-value">{{ productInfo.model }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </dv-border-box-9>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch, computed } from "vue";

import { usePlcStore } from "@/stores/plc";

const plcStore = usePlcStore();

const containerKey = ref(1);
const isRunning = ref(false);
const productInfo = ref({
  name: "无",
  model: "无",
});

// 模拟开关状态数据 使用 PLC store 中的数据来决定开关状态
const switches = computed(() => [
  { name: "前级开关", status: plcStore.frontSwitch, type: "primary" },
  { name: "后级开关", status: plcStore.endSwitch, type: "secondary" },
]);

// 模拟设备状态数据
const devices = computed(() => {
  const outputVoltageProgress = Math.min(100, (plcStore.voltage / 500) * 100);

  return [
    {
      name: "输入电压",
      status: "正常",
      progress: 85,
      value: plcStore.voltage,
      unit: "kV",
    },
    {
      name: "输出电压",
      status: "正常",
      progress: outputVoltageProgress,
      value: plcStore.voltage,
      unit: "kV",
    },
    {
      name: "输入电流",
      status: "警告",
      progress: 65,
      value: (plcStore.voltage * 1.2).toFixed(2),
      unit: "A",
    },
    {
      name: "输出电流",
      status: "正常",
      progress: 78,
      value: (plcStore.voltage * 0.9).toFixed(2),
      unit: "A",
    },
  ];
});

let dataUpdateTimer = null;

// 刷新界面方法
const refreshView = () => {
  containerKey.value += 1;
  // 模拟数据更新
};

// 确保组件在挂载时正确渲染
onMounted(() => {
  // 组件挂载后触发一次 resize 事件
  setTimeout(() => {
    window.dispatchEvent(new Event("resize"));
  }, 100);
});

// 清理定时器
onBeforeUnmount(() => {
  if (dataUpdateTimer) {
    clearInterval(dataUpdateTimer);
  }
});

// 如果需要从父组件调用
defineExpose({
  refreshView,
});

watch(
  () => [plcStore.voltage, plcStore.partialDischarge, plcStore.isConnected],
  ([voltage, partialDischarge, isConnected]) => {
    // 根据电压值判断是否运行
    isRunning.value = isConnected && voltage > 0;

    // 可以在这里添加更多基于PLC数据的逻辑
    console.log("PLC数据更新:", { voltage, partialDischarge, isConnected });
  },
  { deep: true }
);
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  position: relative;
}

.border-box-wrapper {
  width: 100%;
  height: 100%;
}

.content-wrapper {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  background: linear-gradient(
    135deg,
    rgba(16, 22, 46, 0.8) 0%,
    rgba(28, 40, 70, 0.9) 100%
  );
}

.monitor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid rgba(79, 195, 247, 0.3);
  position: relative;

  &::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, #4fc3f7, transparent);
    animation: headerGlow 3s infinite;
  }
}

@keyframes headerGlow {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}

.header-title {
  font-size: 1.5rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-shadow: 0 0 10px rgba(79, 195, 247, 0.5);
}

.animated-icon {
  color: #4fc3f7;
  font-size: 1.8rem;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.header-actions {
  .refresh-btn {
    background: rgba(79, 195, 247, 0.2);
    border: 1px solid rgba(79, 195, 247, 0.5);
    color: #4fc3f7;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
      background: rgba(79, 195, 247, 0.4);
      transform: rotate(90deg);
    }
  }
}

// 变压器概览
.transformer-overview {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(79, 195, 247, 0.2);
}

.transformer-image {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pulse-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(79, 195, 247, 0.1);
  animation: pulseRing 2s infinite;
}

.transformer-svg-icon {
  position: absolute;
  width: 100px;
  height: 100px;
  z-index: 1;
}

@keyframes pulseRing {
  0% {
    transform: scale(0.8);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.transformer-icon {
  font-size: 3rem;
  color: #4fc3f7;
  z-index: 2;
  transition: all 0.3s ease;

  &.active {
    color: #66bb6a;
    text-shadow: 0 0 15px rgba(102, 187, 106, 0.7);
    animation: iconGlow 1.5s infinite alternate;
  }
}

@keyframes iconGlow {
  from {
    text-shadow: 0 0 10px rgba(102, 187, 106, 0.7);
  }
  to {
    text-shadow: 0 0 20px rgba(102, 187, 106, 0.9),
      0 0 30px rgba(102, 187, 106, 0.5);
  }
}

.transformer-status {
  flex: 1;
}

.status-indicator {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  margin-bottom: 15px;

  &.running {
    background: rgba(102, 187, 106, 0.2);
    border: 1px solid rgba(102, 187, 106, 0.5);

    .status-text {
      color: #66bb6a;
    }
  }

  &.stopped {
    background: rgba(244, 67, 54, 0.2);
    border: 1px solid rgba(244, 67, 54, 0.5);

    .status-text {
      color: #f44336;
    }
  }

  .status-text {
    font-weight: 600;
    font-size: 1.1rem;
  }
}

.status-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.detail-item {
  background: rgba(0, 0, 0, 0.2);
  padding: 5px;
  border-radius: 8px;
  text-align: center;

  .label {
    display: block;
    font-size: 0.9rem;
    color: #aaa;
    margin-bottom: 5px;
  }

  .value {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    color: #4fc3f7;
  }
}

// 通用区块样式
.section {
  margin-bottom: 15px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  color: #ffffff;

  i {
    font-size: 1.2rem;
  }

  h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
  }
}

// 开关状态
.switch-status-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.switch-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  }

  &.primary {
    border-left: 4px solid #4fc3f7;
    border-right: 4px solid #4fc3f7;

    &:hover {
      background: rgba(79, 195, 247, 0.15);
    }
  }

  &.secondary {
    border-left: 4px solid #ab47bc;
    border-right: 4px solid #ab47bc;

    &:hover {
      background: rgba(171, 71, 188, 0.15);
    }
  }
}

.switch-icon {
  font-size: 1.8rem;
  transition: all 0.3s ease;
  z-index: 2;

  &.on {
    color: #66bb6a;
    animation: switchOn 0.5s ease;
  }

  &:not(.on) {
    color: #f44336;
  }
}

@keyframes switchOn {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

.switch-info {
  flex: 1;
  z-index: 2;

  .switch-name {
    display: block;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
    font-size: 1rem;
  }

  .switch-status {
    font-size: 0.9rem;
    font-weight: 500;

    &.status-on {
      color: #66bb6a;
    }

    &.status-off {
      color: #f44336;
    }
  }
}
.switch-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;

  &.indicator-on {
    background: #66bb6a;
    box-shadow: 0 0 8px #66bb6a;
  }
}

.primary .switch-indicator.indicator-on {
  background: #4fc3f7;
  box-shadow: 0 0 8px #4fc3f7;
}

.secondary .switch-indicator.indicator-on {
  background: #ab47bc;
  box-shadow: 0 0 8px #ab47bc;
}

.device-value {
  font-size: 1rem;
  font-weight: 400;
  color: #4fc3f7;
  margin: 8px 0;
}

// 设备状态
.device-status-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.device-item {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 15px;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  }
}

.device-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.device-name {
  font-weight: 500;
  color: #fff;
}

.device-status-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;

  &.normal {
    background: #66bb6a;
    box-shadow: 0 0 8px #66bb6a;
  }

  &.warning {
    background: #ff9800;
    box-shadow: 0 0 8px #ff9800;
    animation: blink 1s infinite;
  }

  &.error {
    background: #f44336;
    box-shadow: 0 0 8px #f44336;
    animation: blink 0.5s infinite;
  }
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

.device-status {
  font-size: 0.9rem;
  margin-bottom: 10px;
  font-weight: 500;

  &.正常 {
    color: #66bb6a;
  }

  &.警告 {
    color: #ff9800;
  }

  &.异常 {
    color: #f44336;
  }
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;

  &.正常 {
    background: linear-gradient(90deg, #66bb6a, #4caf50);
  }

  &.警告 {
    background: linear-gradient(90deg, #ff9800, #f57c00);
  }

  &.异常 {
    background: linear-gradient(90deg, #f44336, #d32f2f);
  }
}

// 响应式设计
@media (max-width: 768px) {
  .transformer-overview {
    flex-direction: column;
  }

  .status-details {
    grid-template-columns: 1fr;
  }

  .switch-status-grid,
  .device-status-grid {
    grid-template-columns: 1fr;
  }
}

// 实验产品状态样式
.product-info {
  padding: 15px 0;
}

.product-detail-card {
  display: flex;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(79, 195, 247, 0.2);
}

.product-icon {
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(79, 195, 247, 0.1);
  font-size: 2.5rem;
  color: #4fc3f7;
}

.product-details {
  flex: 1;
  padding: 20px;
}

.detail-row {
  display: flex;
  margin-bottom: 15px;
  align-items: center;

  &:last-child {
    margin-bottom: 0;
  }
}

.detail-label {
  width: 100px;
  font-size: 0.9rem;
  color: #aaa;
  font-weight: 500;
}

.detail-value {
  flex: 1;
  font-size: 1rem;
  color: #fff;
  font-weight: 500;

  &.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;

    &.running {
      background: rgba(102, 187, 106, 0.2);
      color: #66bb6a;
    }

    &.warning {
      background: rgba(255, 152, 0, 0.2);
      color: #ff9800;
    }

    &.completed {
      background: rgba(79, 195, 247, 0.2);
      color: #4fc3f7;
    }
  }
}

.progress-container {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.progress-bar-product {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill-product {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;

  &.running {
    background: linear-gradient(90deg, #66bb6a, #4caf50);
  }

  &.warning {
    background: linear-gradient(90deg, #ff9800, #f57c00);
  }

  &.completed {
    background: linear-gradient(90deg, #4fc3f7, #29b6f6);
  }
}

.progress-text {
  width: 40px;
  font-size: 0.9rem;
  color: #4fc3f7;
  font-weight: 600;
}

// 响应式设计
@media (max-width: 768px) {
  .product-detail-card {
    flex-direction: column;
  }

  .product-icon {
    width: 100%;
    padding: 20px 0;
  }

  .detail-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .detail-label {
    width: auto;
  }
}
</style>